import React, { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Checkbox, Col, Row } from "antd";
import detailData from "../../assets/data/detailData";
import close from "../../assets/img/close.png";

import relation from "./../../assets/img/detail/relation/relation.svg";

import RelationPageData from "./RelationData";
import "./Relation.css";

function Relation(props = {}) {
  const { data = [] } = props;
  let navigate = useNavigate();
  const { search = "" } = useLocation();
  const [selectItem, setSelectItem] = useState({
    A: 0,
    B: 0,
    C: 0,
    D: 0,
    E: 0,
  });

  const searchId = search.split("=")[1];
  const { detailList, color, barMargin, bgColor } = detailData().Relation;
  const {
    pageOne,
    pageTwo,
    pageTree,
    pageFour,
    pageFive,
    pageQuestions,
    pageLove,
  } = RelationPageData();
  function pathSwitch(path = `/`) {
    navigate(path);
  }

  const [checkedList, setCheckedList] = useState([]);

  const onQuestionsChange = (values) => {
    let result = { A: 0, B: 0, C: 0, D: 0, E: 0 };
    const last = values[values.length - 1];
    if (last && values.length > 1) {
      const lastNum = last.replace(/[^\d]/g, " ");
      const index = values.slice(0, values.length - 1).findIndex((e) => {
        const currentNum = e.replace(/[^\d]/g, " ");
        return currentNum === lastNum;
      });
      if (index > -1) {
        values.splice(index, 1);
      }
    }
    let resultKey = Object.keys(result);
    setCheckedList([...values]);
    let arr = [...values];
    arr.forEach((e, i) => {
      resultKey.forEach((f, o) => {
        if (e.includes(f)) {
          result[f] = result[f] + 1;
        }
      });
    });
    setSelectItem({ ...result });
  };

  return (
    <div className="page-detail-info" style={{ backgroundColor: bgColor }}>
      <div style={{ marginTop: "80px", zIndex: 3, position: "relative" }}>
        <div className="cloud cloud-l page-cloud-l"></div>
        <div className="cloud cloud-m page-cloud-m page-cloud-m-relation "></div>
        <div className="cloud cloud-r page-cloud-r page-cloud-r-relation"></div>
        <img
          alt=""
          className="left-ban"
          style={{ position: "absolute", top: "290px", width: "200px" }}
          src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/egg.png"}
        ></img>
        <img
          alt=""
          className="left-ban"
          style={{ position: "fixed", top: "112px", width: "200px" }}
          src={relation}
        ></img>
        <div style={{ display: "flex", width: "50%", margin: "auto" }}>
          <div style={{ margin: "100px 20px 0" }}>
            <div className="page-item">
              <a name={"0"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[0].title}
              </h2>
              <img
                alt=""
                className="page-item-banner"
                src={
                  "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/relation/banner1.png"
                }
              ></img>
              <p className="page-item-info">
                這世代上大學的人數每年上升，大學學費又不斷上漲，20多歲步入社會的新人中有不少背負償還助學貸款的壓力，因此不急於建立家庭。另一方面，女性受教育水平提升，職場地位提高，育兒成本增加，越來越多的人選擇「先立業」而不願過早成家。相信大部份人都認為，生育這回事跟大學生毫不相關。可是婚姻生育決擇是人生重要的一環，無論是從小向往大家庭的你，或是仍未知道自己希望將來的婚育計劃的你，不仿也趁這個機會了解自己更多，讓自己早早計劃，做出適合自己而又不後悔的選擇。
              </p>
              <p className="page-item-info">
                而在談論婚育前，或者我們可以先從談戀愛的課題開始。畢竟，結婚與生育的前題是找到一位各方面合適又相處舒服的另一半，亦要讓自己在雙性關係中懂得去愛人和被愛。但在愛情或親密關係上，卻從來沒有人好好教導我們，該具備什麼樣的特質與能力，這些課題都需要多方面的自我了解和學習。
              </p>
              <p className="page-item-info" style={{ marginTop: "40px" }}>
                想要找到適合又優質的對象，首先自己要成為那個能夠「吸引好對象的人」，在遇到對的人之前，可以透過一些方式好好預備自己。
              </p>
              <div className="relation-pop">
                {pageOne.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="relation-item">
                      <div className="relation-item-title">
                        {" "}
                        <sapn className="relation-item-title-index">
                          {i + 1}
                        </sapn>
                        <span
                          dangerouslySetInnerHTML={{ __html: title }}
                        ></span>
                      </div>
                      <div className="relation-item-value">{value}</div>
                    </div>
                  );
                })}
              </div>
              <p className="page-item-info">
                而在找到自我之前，所談的戀情可能會朝以下兩種模式發展：
              </p>
              <div className="relation-pop-two">
                {pageTwo.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="relation-item">
                      <div className="relation-item-title-two">
                        {" "}
                        <sapn>
                          第{" "}
                          <span className="relation-item-title-index">
                            {i + 1}
                          </span>{" "}
                          種：
                        </sapn>
                        <span
                          dangerouslySetInnerHTML={{ __html: title }}
                        ></span>
                      </div>
                      <div className="relation-item-value">{value}</div>
                    </div>
                  );
                })}
              </div>
              <p className="page-item-info">
                你又經歷過幾多段不合適的愛情？先了解和愛自己，清楚自己想要的是什麼，再展現真誠，不畏懼失敗，勇敢地相信愛情，是開始找尋愛情的必經過程。
              </p>
            </div>
            <div className="page-item">
              <a name={"1"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[1].title}
              </h2>
              <img
                alt=""
                className="page-item-banner"
                src={
                  "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/relation/banner2.png"
                }
              ></img>
              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name="01"></a>
                  愛情親密有妙計<span>1</span>：
                </span>
                互相了解
              </div>
              <p className="page-item-info">
                你相信親密有妙計嗎？
                要找到喜歡的人已經不容易，再跟喜歡的人保持親密更難。心理學家亞倫（Arthor
                Aron)和他的團隊做了一個名為「人際親密感產生試驗」的實驗，他們宣稱只要讓兩個陌生人互相問對方36條問題，透過讓彼此卸下心防、展露最脆弱的一面，雙方的親密度將會大幅上升。同樣的，你們亦可以透過這些問題，更加了解你的伴侶，增加彼此的親密度。
              </p>

              <div className="page-item-five-box page-item-five-relation">
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    • 如果你可以選擇任何人來當你的晚餐嘉賓，你會選擇誰？
                    <br></br>• 你希望自己出名嗎？希望自己以什麼方式出名？{" "}
                    <br></br>• 在打電話之前，你是否曾經預演過自己要說什麼？
                    <br></br>• 為什麼？
                    對於你來說，一個「完美」的一天必須具備什麼元素？ <br></br>•
                    你上一次唱歌給自己聽是什麼時候？上一次唱給別人聽呢？
                    <br></br>•
                    如果你能夠活到九十歲，而你能選擇保有三十歲的身體或三十歲的心靈活力，你會選擇保有哪個?
                    <br></br>• 你對於自己將如何死去，是否曾有過神秘的預感？
                    <br></br>• 說出三個你和你對面這位先生/女士的共同點<br></br>•
                    在人生中，你最感激的事情是什麼？<br></br>•
                    如果你能改變你成長過程中的任何一件事，你會想改變什麼？
                    <br></br>•
                    花四分鐘時間告訴對面這位夥伴你的人生故事，越詳細越好。
                    <br></br>
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    •
                    如果你明天一早醒來，你可以增加一個技能或能力，你希望是什麼？
                    <br></br>•
                    如果有一個水晶球可以告訴你關於你的所有事、你的人生或你的未來，你最想知道什麼是？
                    <br></br>•
                    有沒有什麼事情是你夢寐以求想做的？為何你沒有做這件事？
                    <br></br>• 你人生最大的成就是什麼？<br></br>•
                    在友情中，你最重視的事情是什麼？<br></br>•
                    你人生中最珍惜的是哪一段回憶？<br></br>•
                    你人生中最糟糕的是哪一段回憶？<br></br>•
                    如果你知道一年後你會死掉，你會想改變現在你的生活方式嗎？為什麼？
                    <br></br>
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    • 友情對於你的意義是什麼？<br></br>•
                    愛情以及喜歡在你人生中扮演著什麼樣的角色？<br></br>•
                    輪流分享你面前的夥伴五個正向特質<br></br>•
                    你們的家庭關係如何？<br></br>•
                    你會覺得自己比其他家庭的孩子更幸福嗎？<br></br>•
                    你覺得自己與媽媽的關係如何？<br></br>•
                    造三個以「我們」開頭的句子。例如「我們都在這個房間裡感到……」
                    <br></br>• 完成以下這個句子：「我希望有人能與我共享……」
                    <br></br>•
                    若你將和你面前的夥伴成為親密的朋友，請跟他分享身為親密朋友該知道的事
                    <br></br>• 誠實的告訴你面前的夥伴，你喜歡他的地方<br></br>•
                    和夥伴分享你人生中最尷尬的片刻<br></br>
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    •
                    你上一次在別人面前哭泣是什麼時候？還是你通常自己一個人哭泣？
                    <br></br>• 告訴你的夥伴，你已經開始喜歡他的某些特質<br></br>
                    • 對於你而言，哪些事情開不得玩笑？<br></br>•
                    如果你今晚就會死去，死去前沒有機會再與任何人溝通，你會最後悔沒和誰說什麼話？為什麼這些話你
                    不及早跟他說？<br></br>•
                    你的房子著火了，裡頭有所有你愛的東西，你只有幾分鐘的時間可以救出一個東西，你會選擇救什麼？
                    <br></br>• 家族裡的所有成員哪個人死去，你會最傷心？<br></br>
                    • 為什麼？
                    分享一個你的私人困擾，並請你的夥伴給你一些建議。接著問問他對於你的私人困擾的看法。
                    <br></br>
                  </p>
                </div>
              </div>
              <p className="page-item-info">
                亞倫認為毫無掩飾的脆弱展現能讓親密度升溫，他的提供讓人在短時間內卸下武裝的方向，讓人能夠自在、輕鬆地進行深入的交流。過程中，你能透過彼此討論，分享答案背後的緣由來更了解對方的想法、價值觀、原則。如果你認為自己未能輕易開口或缺乏溝通的方向，你亦可以考慮讓輔導員幫助你，他們能夠以專業的角度引導你疏理自己內心的想法，或幫助你和伴侶好好溝通。
              </p>
              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <img
                alt=""
                className="page-item-banner"
                src={
                  "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/relation/banner3.png"
                }
              ></img>

              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name="02"></a>
                  愛情親密有妙計<span>2</span>：
                </span>
                審視關係
              </div>

              <p className="page-item-info" style={{ width: "50%" }}>
                根據Sternberg的愛情三角理論，愛由親密（Intimacy）、激情（Passion）和承諾（Commitment）組成。三個元素的交互影響形成不同模式的愛。同時存有親密、激情和承諾的愛情就是Sternberg理論中完美的愛（Consummate
                Love）。
              </p>
              <div className="relation-pop-three">
                {pageTree.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="relation-item">
                      <div
                        className="relation-item-title-three"
                        style={{ color: color }}
                      >
                        {" "}
                        {title}
                      </div>
                      <div className="relation-item-value">{value}</div>
                    </div>
                  );
                })}
              </div>
              <p
                className="page-item-info"
                style={{ width: "50%", marginBottom: "80px" }}
              >
                愛情三角理論固然可以讓我們更了解愛的構成，並審視自己與愛人的關係，但單靠一個愛情三角並不足以全面地了解一個人的戀愛狀況。Sternberg認為愛情三角和自我概念一樣，都可以分為「真實三角」（Actual
                Triangle）和「理想三角」（Ideal
                Triangle）。過往的戀愛經歷會令我們對未來的戀愛產生相應的期望，但理想的愛情是一回事，現實的愛情可能又是另一回事。同時，Sternberg強調愛情三角可以分成「感覺三角」（Triangle
                of Feelings）和「行動三角」（Triangle of
                Action）。要知道，戀愛是兩個人的關係。單單對伴侶有親密、熱情的感覺是不足夠的，惟有具體行動才可以讓伴侶感受到關係中的愛意。主動和伴侶分享日常大小事，甚至是一個關懷的目光，都可以是表達愛意的行動。愛情三角理論雖然聽似只描述了愛的三個元素，在應用上卻可以讓我們從多個角度切入，理解自己是怎樣看待愛情，怎樣實踐愛情。
              </p>
              <div className="page-item-sub">
                親密關係
                <span style={{ color: color, fontSize: "18px" }}>4</span>階段
              </div>

              <p className="page-item-info">
                另一個用作審視關係的理論是親密關係四階段的理論。英國心理學大師Jeff
                Allen，將親密關係分成四階段，每個階段都有其特定的特徵和挑戰。
              </p>

              <div className="page-item-six-relation">
                <div className="page-item-six-item">
                  <div className="page-item-six-item-title">
                    甜蜜期（Honeymoon Phase）
                  </div>
                  <div className="page-item-six-item-value">
                    在這個階段，兩個人感到互相吸引，充滿愛意和激情，是一段充滿浪漫和激情的開始階段。伴侶可能會花很多時間在一起，分享共同的興趣和活動。通常在這個階段中，人們對對方的缺點和問題看得相對輕微，而且表現出更多的溫和和體貼。
                  </div>
                </div>
                <div className="page-item-six-item">
                  <div className="page-item-six-item-title">
                    角力期（Power Struggle）
                  </div>
                  <div className="page-item-six-item-value">
                    角力期是在甜蜜期之後，當激情開始消退時出現的階段。伴侶可能開始意識到彼此的差異和矛盾，並開始疏理關係中的衝突。這個階段可能伴隨著不安、爭執和情感波動，這是一個關係中的成長和調整階段，需要學習如何相討、溝通和解決衝突。
                  </div>
                </div>
                <div className="page-item-six-item">
                  <div className="page-item-six-item-title">
                    假性親密期（Pseudo-Intimacy）
                  </div>
                  <div className="page-item-six-item-value">
                    假性親密期可能出現在角力期後。在這個階段，一些人可能會開始建立假性親密關係，這種關係看似親密，但實際上缺乏真正的情感連結。可能出於不正確的動機，例如寂寞、社會壓力或恐懼而保持這種關係。
                  </div>
                </div>
                <div className="page-item-six-item">
                  <div className="page-item-six-item-title">
                    夥伴期（Committed Partnership）
                  </div>
                  <div className="page-item-six-item-value">
                    夥伴期是一個成熟的關係階段，當兩個人已經克服了角力期和假性親密期的挑戰，建立了更穩定和健康的連結。在這個階段，伴侶更加了解彼此，並學會彼此支持和尊重。他們通常建立了共同的目標和價值觀，並願意長期投入關係。這個階段可能伴隨著更多的安全感、穩定性和情感滿足感。
                  </div>
                </div>
              </div>

              <p className="page-item-info">
                每對情侶的經歷都是獨特的，關係可能不會遵循這些次序，也可能會多次在不同階段之間循環。重要的是要理解自己和另一半在哪個階段，以便應對關係中的挑戰，並共同努力維持健康的親密關係。
              </p>
              <div className="page-item-sub">你在關係中的感受</div>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    1
                  </span>
                  你有沒有「被優先考量」的感？
                </div>
                研究指出，在一段親密關係中，「無心之過」所帶來的傷害，有時不亞於「刻意為之」。習慣性遲到、晚回家時忘記先打通電話報備讓人放心、敷衍兩人之間的協議或約定......這些矛頭通通都指向同一件事：
                讓對方感到不被顧慮與重視。即便是小事，如果能夠在細節上多用心思，也能讓另一半感覺自己被優先考量。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    2
                  </span>
                  你有「被信任」的感覺？
                </div>
                我們都需要能為自己帶來信心和支持感的伴侶。有一個心理學術語叫做「預期效應」（Rosenthal-Effect），意思是指，當我們對另一個個體保持積極的信任與期待，無形中就能增強對方的信心，促使他有更好的表現。關係良好的伴侶都擁有一種共同的特質，就是他們堅信彼此的善良本性。衝突與爭吵並不會影響他們對伴侶人格的信心，就算對方某一次做出讓人失望的行為，他們仍然相信伴侶是一位誠懇且值得被愛的人。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    3
                  </span>
                  你有「被傾聽」的感覺？
                </div>
                研究發現，「積極傾聽」是讓親密伴侶感到被接納、被尊重的首要行為。心理學家
                Ronald E. Riggio
                也是這麼指出的：「真正的傾聽是撇開預設立場，用充分的同理心去回饋你的戀人
                ，包括他們的感受、思想、壓力與情感需求。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    4
                  </span>
                  你有「被渴望」的感覺？
                </div>
                基本上，所有的浪漫關係都有一種通用的經營守則，就是努力與自己的伴侶保持親密感
                。但是，展示渴望並不一定單指性交，可以是擁抱、親吻、搭肩、牽手等等。肢體碰觸所帶來的力量，能夠構成每段健康關係中不可或缺的一部分。
              </p>

              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <img
                alt=""
                className="page-item-banner"
                src={
                  "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/relation/banner4.png"
                }
              ></img>
              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name="03"></a>
                  愛情親密有妙計<span>3</span>：
                </span>
                愛情的語言
              </div>
              <p className="page-item-info">
                愛之語是由Gary Chapman
                所創設的愛情語言。它歸納與總結了五種愛情語言，它們代表了我們對戀人表達愛意的各種方式。核心概念是：每個人都有一種最擅長的主要愛情語言。在愛情裡有共通的語言，那麼彼此之間的交流就會很順利。相反的，如果彼此所熟悉的語言各不相同，那麼愛情的溝通就可能會遇到阻礙。例如，無法感受到對方的愛、甚至認為對方不再愛我了。
              </p>
              <p className="page-item-info">
                在每題的兩個選項中選出自己的喜好，然後統計 A、B、C、D、E
                哪個次數最多，就是你主要的愛的語言。
              </p>

              {/* 选择 */}
              <Checkbox.Group onChange={onQuestionsChange} value={checkedList}>
                {pageQuestions.map((e, i) => {
                  const { list } = e;
                  return (
                    <div className="questions-item">
                      <div style={{ fontSize: "16px", fontWeight: 700 }}>
                        {i + 1}
                      </div>
                      {/* <div className="questions-box">
                      {
                        list.map((item) => {
                          const { name, id } = item;
                          return <div className="questions-box-line">
                            <div className="questions-name">{name}</div>
                            <div className="questions-an questions-an-active"><span></span></div>
                          </div>
                        })
                      }
                    </div> */}
                      <div className="questions-box">
                        {list.map((item) => {
                          const { name, id } = item;
                          return (
                            <div className="questions-box-line">
                              <div className="questions-name">{name}</div>
                              {/* <div className="questions-an questions-an-active"><span></span></div> */}
                              <Checkbox value={i + 1 + id}></Checkbox>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
              </Checkbox.Group>
              <div className="relation-total-score">
                <div>總計：</div>
                {/* {
                  pageLove.map((e, i) => {
                    const { title, total } = e;
                    return <div className={`relation-total-item`}>
                      <div className="relation-total-title"
                      > {title} =
                      </div>
                      <div className="relation-total-total"
                      >  {total}
                      </div>
                    </div>
                  })
                } */}
                {Object.keys(selectItem).map((e, i) => {
                  return (
                    <div className={`relation-total-item`}>
                      <div className="relation-total-title"> {e} =</div>
                      <div className="relation-total-total">
                        {" "}
                        {selectItem[e].toString().padStart(2, 0)}
                      </div>
                    </div>
                  );
                })}
              </div>

              <div className="relation-sub-title">
                <span
                  className="relation-sub-title"
                  style={{ color: color, fontSize: "24px" }}
                >
                  5{" "}
                </span>
                種愛的語言
              </div>
              <div className="relation-love-warp">
                {pageLove.map((e, i) => {
                  const { title, name, value } = e;
                  return (
                    <div
                      className={`relation-love-item relation-love-item${title}`}
                    >
                      <div className="relation-love-title"> {title}</div>
                      <div
                        className="relation-love-name"
                        dangerouslySetInnerHTML={{ __html: name }}
                      ></div>
                      <div className="relation-love-value">{value}</div>
                    </div>
                  );
                })}
              </div>

              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <img
                alt=""
                className="page-item-banner"
                src={
                  "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/relation/banner5.png"
                }
              ></img>
              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name="04"></a>
                  愛情親密有妙計<span>4</span>：
                </span>
                解決負面溝通
              </div>
              <div className="page-item-sub">
                「末日四騎士」（Four Horsemen of the Apocalypse）
              </div>
              <p className="page-item-info">
                約翰高特曼博士（Dr John
                Gottman）發現了四種負面溝通模式，他稱之為「末日四騎士」（Four
                Horsemen of the
                Apocalypse），研究發現這些模式會影響關係，亦能預測這段愛情關係完結，且準確度超過九成。以下將介紹「末日四騎士」，以及相應的解決方法。
              </p>

              {pageFour.map((e, i) => {
                const { title, value, example1, meth1, example2, meth2 } = e;
                return (
                  <div>
                    <div className="page-item-sub">{title}</div>
                    <p className="page-item-info">{value}</p>
                    <div className="page-item-example">{example1}</div>
                    <p className="page-item-info">
                      <span style={{ color: color }}>解決方法:</span> {meth1}
                    </p>
                    <div className="page-item-example">{example2}</div>
                    <p className="page-item-info">{meth2}</p>
                  </div>
                );
              })}

              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <img
                alt=""
                className="page-item-banner"
                src={
                  "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/relation/banner6.png"
                }
              ></img>
              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name="05"></a>
                  愛情親密有妙計<span>5</span>：
                </span>
                解除心結
              </div>
              <p className="page-item-info">
                你有沒有一直藏在內心深處的事情沒有跟另一半說？或者一些令你耿耿於懷的心結？如果沒有正確地處理失落的情緒，有些傷痛是可以影響關係的。藏在內心深處的心結會影響伴侶之間的關係，所以我們應嘗試解決問題。以下展開對話的方法：
              </p>
              {pageFive.map((e, i) => {
                const { title } = e;
                return (
                  <div className="page-item-info">
                    <span
                      style={{
                        color: color,
                        fontSize: "24px",
                        marginRight: "6px",
                        fontWeight: 700,
                      }}
                    >
                      {i + 1}
                    </span>
                    {title}
                  </div>
                );
              })}
              <p className="page-item-info">
                過程中可能會出現一些不舒服的時刻，但是過程會令我們變得更加熟悉彼此。遇到問題時便能更有效地解決問題，關係會變得更親密。
              </p>
            </div>
            <div className="page-item">
              <a name={"2"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[2].title}
              </h2>
              <img
                alt=""
                className="page-item-banner"
                src={
                  "https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/relation/banner7.png"
                }
              ></img>

              <p className="page-item-info">
                面對不育時的複雜情緒，夫妻關係會遇上很大的挑戰，但我們也是視此為一個了解自己和另一半的機會，從而更加懂得用另一半感受到的方法去愛對方，讓關係在不育的難關下不但沒有受創，反而變得更好。
              </p>
              <div className="page-item-sub">了解自己需要</div>
              <p className="page-item-info">
                面對求孕過程中恐慌壓力，請先理解自己很難不想或不期待，但我們可以透過了解自己的情緒來安撫自己。例如透過心情日記去記錄自己在求孕過程中的情緒起伏，從而了解某些感受背後是否有一些原因，例如：對結果感到焦慮，沒有小孩就是我就是不孝順，因為從小父母都提醒我要傳承家庭。透過了解自己情緒背後的意義，會更容易和自己的情緒和解。另外，透過正念放鬆練習，訓練自己將注意力放在呼吸或身體的感受。亦可關注自己的各方面的健康，建立一套自己的減壓方法，例如：培養興趣、建立健康的生活模式，讓注意力不要只停留在不育上。
              </p>
              <p className="page-item-info">
                如果情況仍然未能舒緩，則可以聯絡輔導員作出跟進。不育治療的輔導（Infertility
                Counselling）旨在協助你了解自己在求孕期間的內心需要，了解內心需要背後的原因，舒緩情緒後找回面對困難的能力。​求孕歷程中，總有高低起伏。在療癒過程中，最重要的是被接納、聆聽和支持。有專業人士的幫助下，情緒會更容易得以紓解。
              </p>
              <div className="page-item-sub">和另一半互相支援</div>
              <p className="page-item-info">
                不育治療會影響現有的家庭模式。及早跟另一半協調在不育治療中如何互相配合，例如：請假一同出席醫院的程序、討論家務的分工、如何面對親友的提問、如果失敗後會否再試等。如面對自己的感受未有被另一半照顧時，請練習「我如何…，我希望你可以…，我們一起…。」的溝通方式。例如：「我自己去見醫生會感到很孤單，我希望你可以請假來，我希望們一起面對不育這件事。」
              </p>
              <p className="page-item-info">
                其實，大部分的夫妻都會想要一起面對這件事，只要彼此容許表達和自己不同，透過這樣的溝通可以同步。如果自己暫時未有力去照顧對方，可以坦誠回應，例如，「我工作回來，好累了，可以明天晚試一起想接下來怎麼處理嗎？」如果情況未有改善，伴侶輔導（Couple
                Counselling)
                也是一個可以幫助是伴侶雙方協調的方法。在一個安全的環境中，輔導員會引導伴侶雙方坦誠內心的需要，以專業的輔導技巧協助雙方合作，一步一步地疏導影響親密關係的惡性循環，讓彼此重建親密的情感連結，更深入地享受關係的美好。
              </p>
              <p className="page-item-info">
                當我們可以疏導不育而來的情緒和背後的意義，和另一半協調從而跨過不育的壓力，我們就能務實評估自己的狀態，也會比較能夠回穩面對。當不育對自己的生命不要有那麼多的耗損，這個經驗本身也有機會成為生命的禮物，讓我們更坦然面對獨特的生命歷程。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="page-bar">
        {detailList.map((e, i) => {
          const { titleBar, title, id } = e;
          return (
            <div
              style={{
                display: "flex",
                margin: barMargin,
                color: color,
                cursor: "pointer",
              }}
            >
              <div
                style={{
                  minWidth: "10px",
                  background: color,
                  borderRadius: "5px",
                  margin: "0 10px",
                }}
              ></div>
              {/* <div dangerouslySetInnerHTML={{ __html: titleBar }}></div> */}
              {i === 1 ? (
                <div>
                  <a
                    dangerouslySetInnerHTML={{ __html: titleBar }}
                    href={"#" + i}
                    style={{ color, textDecoration: "none" }}
                  ></a>
                  <div className="alink">
                    <a
                      dangerouslySetInnerHTML={{ __html: "1" }}
                      href={"#01"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                    <a
                      dangerouslySetInnerHTML={{ __html: "2" }}
                      href={"#02"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                    <a
                      dangerouslySetInnerHTML={{ __html: "3" }}
                      href={"#03"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                    <a
                      dangerouslySetInnerHTML={{ __html: "4" }}
                      href={"#04"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                    <a
                      dangerouslySetInnerHTML={{ __html: "5" }}
                      href={"#05"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                  </div>
                </div>
              ) : (
                <a
                  dangerouslySetInnerHTML={{ __html: titleBar }}
                  href={"#" + i}
                  style={{ color, textDecoration: "none" }}
                ></a>
              )}
            </div>
          );
        })}
      </div>
      <img
        className="page-close cursor-pointer"
        alt=""
        src={close}
        onClick={() => pathSwitch()}
      />
      <div className="page-detail-foot">
        <div className="gradual gradual-our"></div>
        <div className="detail-foot"></div>
        <div className="detail-floor"></div>
      </div>
      <div className="detail-wave">
        <div className="bg-wave bg-wave-l bg-wave-relation-l"></div>
        <div className="bg-wave bg-wave-our bg-wave-relation-r"></div>
      </div>
    </div>
  );
}

export default Relation;
